<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯视频-中国领先的在线视频媒体平台，海量高清视频在线观看</title>
    <link rel="stylesheet" type="text/css" href="homepage.css">
</head>

<body>
    <div class="page">
        <div class="right-box">
            <div class="header right-box">
                <div class="search">
                    <div class="search_words">
                        <input type="text" placeholder="与凤行" class="search-input">
                    </div>
                    <div class="search_right_after">
                        <img src="images/paihangbang-icon.png">
                        <button type="submit" class="search_button2">
                            <!-- <span class="search_button_content"> -->
                            <img src="images/search-icon.jpg">
                            全网搜
                            <!-- </span> -->
                        </button>
                    </div>
                    <button type="submit" class="search_button">
                        <span class="search_icon"><img src="images/search-icon.jpg"></span>
                    </button>
                    <div class="search_droplist">
                        <div class="search_droplist_hot">
                            <!-- <div class="search_droplist_hot_head">热门搜索</div>
                            <div class="search_droplist_hot_body"> -->
                            <!-- <div class="search_item">
                                </div> -->
                        </div>
                    </div>
                </div>
                <div class="select">
                    <div class="select_left">
                        <span>
                            <img src="images/VIP-icon.png" alt="">
                        </span>
                        <span>
                            <img src="images/game-icon.png" alt="">
                        </span>
                        <span>
                            <img src="images/record-icon.png" alt="">
                        </span>
                        <span>
                            <img src="images/video-icon.png" alt="">
                        </span>
                        <span>
                            <img src="images/download.png" alt="">
                        </span>
                    </div>
                    <div class="user">
                        <img src="images/user-icon.png" alt="" class="user_icon">
                        <ul class="user-droplist">
                            <!-- <div class="transparent-ground"> -->
                            <li class="user-droplist-head">登录之后可以</li>
                            <li class="user-droplist-content">同步多端观看记录</li>
                            <li class="user-droplist-content">参与互动讨论</li>
                            <li class="user-droplist-content">观看更个性化内容</li>
                            <li class="user-droplist-content">领取专属游戏礼包</li>
                            <li class="user-droplist-login">
                                <div><a href="#login-frame">立即登录</a></div>
                                <!-- <div id="login-frame">
                                                        <div class="login-head">登录后更精彩</div>
                                                        <a href="#">close</a>
                                                    </div> -->
                            </li>
                            <!-- </div> -->
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="video-channel">
            <div class="large-focus">
                <a href="#">
                    <div class="large-ground">
                        <div class="focus-video">
                            <div class="focus-logo">
                                <img src="images/video_logo-yufengxing.png" class="logo">
                            </div>
                            <div class="focus-person">
                                <span>赵丽颖 林更新 仙侠玄幻</span>
                            </div>
                            <div class="focus-content">
                                <span>"赵丽颖林更新甜虐仙凡恋"</span>
                            </div>
                            <div class="focus-play_sound">
                                <div class="playbutton">
                                    <span class="play-icon">
                                        <img src="images/play-icon.png">
                                    </span>
                                    <span class="play-content">播放正片</span>
                                </div>
                                <div class="sound-control">
                                    <!-- <span class="sound-icon"> -->
                                    <img src="images/sound-icon.png">
                                    <!-- </span> -->
                                </div>
                            </div>
                        </div>
                        <div class="focus-list">
                            <div class="focus-list-video list_video_1">
                                <a href="#">
                                    <div class="focus-list-image">
                                        <img src="images/video-yufengxing.jpg">
                                        <div class="focus_list_unchoice unchoice_active"></div>
                                    </div>
                                    <div class="focus-list-name">与凤行</div>
                                </a>
                            </div>
                            <div class="focus-list-video list_video_2">
                                <a href="#">
                                    <div class="focus-list-image">
                                        <img src="images/video-zhuxian.jpg">
                                        <div class="focus_list_unchoice"></div>
                                    </div>
                                    <div class="focus-list-name">诛仙</div>
                                </a>
                            </div>
                            <div class="focus-list-video list_video_3">
                                <a href="#">
                                    <div class="focus-list-image">
                                        <img src="images/video-relaguntang.jpg">
                                        <div class="focus_list_unchoice"></div>
                                    </div>
                                    <div class="focus-list-name">热辣滚烫</div>
                                </a>
                            </div>
                            <div class="focus-list-video list_video_4">
                                <a href="#">
                                    <div class="focus-list-image">
                                        <img src="images/video-canlandeta.jpg">
                                        <div class="focus_list_unchoice"></div>
                                    </div>
                                    <div class="focus-list-name">灿烂的她</div>
                                </a>
                            </div>
                            <div class="focus-list-video list_video_5">
                                <a href="#">
                                    <div class="focus-list-image">
                                        <img src="images/video-banshulianren.jpg">
                                        <div class="focus_list_unchoice"></div>
                                    </div>
                                    <div class="focus-list-name">半熟恋人</div>
                                </a>
                            </div>

                            <div class="arrow-icon">
                                <img src="images/arrow-icon.png">
                            </div>
                        </div>


                        <div class="gradient"></div>
                    </div>
                </a>
            </div>
            <div>
                <div class="video-hot">
                    <div class="video-hot-head">
                        <div class="hot-head-left">
                            <span id="hot-head-left">重磅热播</span>
                            <span id="fengexian">|</span>
                        </div>
                        <div class="hot-head-right">
                            <span>全部</span>
                            <span>电视剧</span>
                            <span>综艺</span>
                            <span>电影</span>
                            <span>动漫</span>
                            <span>少儿</span>
                            <span>纪录片</span>
                        </div>
                        <div class="hot-head-change">
                            <div><img src="images/change-icon.png"></div>
                            <span>换一换</span>
                        </div>
                    </div>
                    <div class="video-hot-choices_all video-hot-choices">
                        <div class="hot-choices-content">
                            <a href="#" class="choice-content">
                                <div class="choices-status-dubo">独播</div>
                                <img src="">
                                <div class="choices-bottom-status"></div>
                                <div class="choices-bottom-gradient"></div>
                                <video class="choices_hover_video" muted autoplay loop>
                                    <!-- <source src=""> -->
                                    <source
                                        src="https://smalla.oss-cn-guangzhou.aliyuncs.com/358f7886212c48939403f861f2647a6c.mp4">
                                </video>
                            </a>
                            <div class="choices_hover">
                                <div class="choices_hover_collect">
                                    <!-- <img src="" class="collect_before"> -->
                                    <span class="collect_before">追</span>
                                    <span class="choices_collect-active">在追</span>
                                </div>
                                <div class="choices_hover_title">
                                    <span></span>
                                </div>
                                <div class="choices_hover_content">
                                    <span class="choices_hover_content1"></span>
                                    <!-- <span class="choices_hover_content2"></span> -->
                                </div>
                            </div>
                            <div class="choices-title">
                                <div class="choices-name"></div>
                                <span class="choices-introduction"></span>
                            </div>
                        </div>
                    </div>
                    <div class="video-hot-choices_TVplay video-hot-choices"></div>
                    <div class="video-hot-choices_zongyi video-hot-choices"></div>
                    <div class="video-hot-choices_movie video-hot-choices"></div>
                    <div class="video-hot-choices_animation video-hot-choices"></div>
                    <div class="video-hot-choices_children video-hot-choices"></div>
                    <div class="video-hot-choices_documentaty video-hot-choices"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="left-nav">
        <div class="logo-box">
            <div class="logo-link">
                <a href="https://v.qq.com/">
                    <img src="images/logo.jpg" id="logo">
                    <img src="images/logo_name-icon.png" id="logo-name">
                </a>
            </div>
        </div>
        <div class="left-nav-frame">
            <div>
                <div id="home">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                首页
                            </div>
                            <div class="item-icons">
                                <img src="images/star-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="VIP">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                VIP会员
                            </div>
                            <div class="item-icons">
                                <img src="images/left_VIP-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="medium-video">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                中视频
                            </div>
                            <div class="item-icons">
                                <img src="images/zhongshipin-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="TV-series">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                电视剧
                            </div>
                            <div class="item-icons">
                                <img src="images/left_video-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="movie">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                电影
                            </div>
                            <div class="item-icons">
                                <img src="images/button-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="zongyi">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                综艺
                            </div>
                            <div class="item-icons">
                                <img src="images/zongyi-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="animation">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                动漫
                            </div>
                            <div class="item-icons">
                                <img src="images/animation-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="children">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                少儿
                            </div>
                            <div class="item-icons">
                                <img src="images/children-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="NBA">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                NBA
                            </div>
                            <div class="item-icons">
                                <img src="images/ball-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="documentary">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                纪录片
                            </div>
                            <div class="item-icons">
                                <img src="images/jilupian-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="short-play">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                短剧
                            </div>
                            <div class="item-icons">
                                <img src="images/left_video-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="sport">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                体育
                            </div>
                            <div class="item-icons">
                                <img src="images/basketball-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="game-center">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                游戏中心
                            </div>
                            <div class="item-icons">
                                <img src="images/left-game-icon.png">
                            </div>
                        </div>
                    </a>
                </div>
                <div id="left-game">
                    <a href="#" class="left-item-frame">
                        <div class="nav-item">
                            <div class="text">
                                游戏
                            </div>
                            <div class="item-icons">
                                <img src="images/left-game-icon.png">
                            </div>
                        </div>
                    </a>
                </div>



            </div>
        </div>
    </div>

    <div class="login_model_box">
        <div class="login_model_box_content">
            <div class="login_model_box_close">×</div>
            <div class="login_model_box_title">
                <span>登录</span>
            </div>
            <div class="login_model_box_notes">登录后高清播放更流畅</div>
            <div class="login_model_box_detail">

                <div class="login_model_box_detail_left register">
                    <div class="login_model_box_detail_left_title">账号注册</div>
                    <div class="login_model_box_detail_left_tip">请输入注册账号和密码</div>
                    <div class="login_model_box_form">
                        <form class="login_form">
                            <div class="login_model_box_input">
                                <input type="text" placeholder="用户名" class="register_username">
                            </div>
                            <div class="login_model_box_input">
                                <input type="password" placeholder="密码" class="register_password">
                            </div>
                            <button type="button" class="login_model_box_submit_register">注册</button>
                        </form>
                    </div>
                    <div class="login_model_box_detail_left_bottom">
                        <a><span>找回密码</span></a>
                        <a><span class="to_login">登录账号</span></a>
                        <a><span>意见反馈</span></a>
                    </div>
                </div>
                <div class="login_model_box_detail_left login">
                    <div class="login_model_box_detail_left_title">密码登录</div>
                    <div class="login_model_box_detail_left_tip">推荐使用快捷登录，防止盗号</div>
                    <div class="login_model_box_form">
                        <form class="login_form">
                            <div class="login_model_box_input">
                                <!-- <label class="login_model_box_input_words">支持QQ号/邮箱/手机号登录</label> -->
                                <!-- <input type="text"> -->
                                <input type="text" placeholder="支持QQ号/邮箱/手机号登录" class="login_username">
                            </div>
                            <div class="login_model_box_input">
                                <!-- <label class="login_model_box_input_words" id="password">请输入密码</label> -->
                                <!-- <input type="password"> -->
                                <input type="password" placeholder="请输入密码" class="login_password">
                            </div>
                            <button type="button" class="login_model_box_submit_login">登录</button>
                        </form>
                    </div>
                    <div class="login_model_box_detail_left_bottom">
                        <a><span>找回密码</span></a>
                        <a><span class="to_register">注册账号</span></a>
                        <a><span>意见反馈</span></a>
                    </div>
                </div>
                <div class="login_model_box_detail_right">
                    <div class="login_model_box_right_content">
                        <ul class="login_model_box_right_select">
                            <li>
                                <input type="checkbox">
                                <label>全选 腾讯视频 将获得以下权限</label>
                            </li>
                            <li><input type="checkbox">
                                <label>使用你的QQ头像、昵称信息</label>
                            </li>
                        </ul>
                        <div>授权即同意服务协议和QQ隐私保护指引</div>
                    </div>
                </div>

            </div>
            <!-- <form action="#"> -->

            <!-- <div class="form_input"> -->
            <!-- </div> -->
            <!-- </form> -->
        </div>
    </div>
    </div>
    <script src="homepage.js"></script>
    <script src="register&login.js"></script>
</body>

</html>